<#import "/spring.ftl" as spring/>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">

    <title>支付</title>

    <link rel="stylesheet" href="<@spring.url '/css/qrcode-redirect.css'/>"/>

    <script type="text/javascript" src="<@spring.url '/js/jsrel1.0.7.js?1665454'/>"></script>

</head>

<body>
<#if showConfirmPage>
    <div class="content-bg"></div>
    <div class="content header">
        <span><img src="<@spring.url '/images/shield.png'/>" alt="checked"/></span>
        ${title}
    </div>
    <div class="content flat-top">
        <div class="field-group">
            <div class="field-name" style="padding-top: 0.675rem">需支付金额</div>
            <div class="field-value"><span id="price" class="price">${amount?string('0.00')}</span>元</div>
        </div>
        <div class="field-group">
            <div class="field-name">订单金额</div>
            <div class="field-value"><span id="order-price" class="order-price">${amount?string('0.00')}</span>元</div>
        </div>
        <div class="field-group">
            <div class="field-name">收款商户</div>
            <div class="field-value">${merchantName}</div>
        </div>

        <div class="field-group last" style="text-align: center">
            <a href="#" class="btn" onclick="pay()">立即支付</a>
        </div>
    </div>
<#else>
    <h2 style="text-align: center; margin-top: 2rem;">支付中...</h2>
</#if>
<script>
    rel.init({
        appid: "${appId}",          // 必填，公众号的唯一标识
        timestamp: "${timestamp}",  // 必填，生成签名的时间戳
        nonceStr: "${nonceStr}",    // 必填，生成签名的随机串
        signature: "${signature}",  // 必填，签名，见附录1
        debug: 1,                   // 选填1 为调试模式，不传为关闭
    });

    rel.ready(function() {
        rel.checkJsApi({
            jsApiList: "checkJsApi,chooseRELPay",
            success: function(res) {
                var resp = JSON.stringify(res);
                alert(resp);
                if (res.errMsg != "checkJsApi:ok") {
                    alert("Error: App version not supported!");
                }
            }
        });
    });

    rel.error(function(res) {
        alert(JSON.stringify(res, null, 2));
    });

    function pay() {
        rel.chooseRELPay({
            appid: "${appId}",              // 必填，公众号的唯一标识
            timestamp: "${timestamp}",      // 必填，生成支付签名的时间戳
            orderid: "${orderNo}",          // 必填，订单id
            totalFee: "${orderAmount}",     // 必填，支付金额(分)
            nonceStr: "${nonceStr}",        // 必填，生成支付签名的随机串
            channelAppNo: "",               // 非必填,渠道应用编号
            remark: "",                     // 必填,备注信息
            signature: "${paySign}",        // 必填，签名,生成签名方法可以参考支付章节-附录2 jsapi支付
            success: function (res) {
                alert('支付成功！！');
                var result = res.errMsg;    // 返回支付结果成功为chooseRELPay:ok
                alert("chooseRELPay success " + res.errMsg);
            },
            failed:function(res) {
                alert("调用失败");
                alert("chooseRELPay failed " + res.errMsg);
                },
                complete:function(res) {
                    alert("chooseRELPay complete " + res.errMsg);
                },
                cancel:function(res) {
                    alert("chooseRELPay cancel " + res.errMsg);
                }
            });
        }
    </script>
</body>

</html>